import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  CloseOutlined,
  CheckOutlined,
} from '@ant-design/icons';
import { Layout, Button, theme, ConfigProvider, Switch, Avatar, Dropdown, Typography } from 'antd';
import { useNavigate,Outlet } from 'react-router-dom';
import { removeToken } from '@/store/token';
import Menus from '@/components/Menus';
import { setDark } from '@/store/darks';
const { Header, Sider, Content } = Layout;
const { Text } = Typography;
const Home: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const state = useSelector((state: any) => state.darksSlice);
  const [collapsed, setCollapsed] = useState(false);

  return (
    <ConfigProvider
      theme={{
        components: {
          Layout: {
            siderBg: state.dark === 'light' ? '#fff' : '#000',
            headerBg: state.dark === 'light' ? '#fff' : '#000',
          }
        },
        algorithm: state.dark === 'light' ? [theme.defaultAlgorithm] : [theme.darkAlgorithm],
      }}>
      <Layout style={{ height: '100vh' }}>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <Menus />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: state.dark !== 'light'?'1px solid rgb(46 46 46)':'' }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
            <div style={{ display: 'flex', alignItems: 'center', marginRight: 80 }}>
              <Switch
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                checked={state.dark === 'dark'}
                onChange={(checked) => dispatch(setDark(checked ? 'dark' : 'light'))}
                style={{ marginRight: 50 }}
              />
              <div>
                <Dropdown menu={{
                  items: [{
                    label: <div onClick={() => {
                      dispatch(removeToken())
                      navigate("/login")
                    }
                    }>注销</div>,
                    key: '0',
                  }]
                }}
                >
                  <a onClick={(e) => e.preventDefault()}>
                    <Avatar size={30} icon={<UserOutlined />} style={{ marginRight: 10 }} />
                    <Text>xxxx</Text>
                  </a>
                </Dropdown>

              </div>
            </div>

          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            <Outlet/>
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>

  );
};

export default Home;